CSS @property reegel: Kohandatud omaduste tüübimääratluse võimekuse avamine

CSS-i maailm areneb pidevalt ning üks uuemaid ja võimsamaid täiendusi on @property reegel. See reegel pakub mehhanismi kohandatud omaduste tüüpide defineerimiseks, tuues teie CSS-i suurema kontrolli ja paindlikkuse ning avades uksed keerukamatele animatsioonidele, täiustatud teemade kujundamise võimekusele ja robustsemale üldisele CSS-arhitektuurile. See artikkel süveneb @property reeglisse, uurides selle süntaksit, võimekust ja praktilisi rakendusi, hoides samal ajal silmas globaalset publikut.

Mis on CSS-i kohandatud omadused (muutujad)?

Enne @property reeglisse süvenemist on oluline mõista CSS-i kohandatud omadusi, tuntud ka kui CSS-i muutujad. Kohandatud omadused võimaldavad teil oma CSS-is defineerida korduvkasutatavaid väärtusi, muutes teie stiililehed hooldatavamaks ja lihtsamini uuendatavaks. Need deklareeritakse kasutades --muutuja-nimi süntaksit ja neile pääseb ligi var() funktsiooni abil.

Näide:

:root {
  --primary-color: #007bff; /* Globaalselt defineeritud esmane värv */
  --secondary-color: #6c757d;
}

a {
  color: var(--primary-color);
  text-decoration: none;
}

button {
  background-color: var(--primary-color);
  color: white;
  border: none;
  padding: 10px 20px;
}

Selles näites on --primary-color ja --secondary-color kohandatud omadused. Kui teil on vaja muuta esmast värvi kogu oma veebisaidil, peate seda uuendama vaid ühes kohas – :root selektoris.

Tavaliste kohandatud omaduste piirangud

Kuigi kohandatud omadused on uskumatult kasulikud, on neil oluline piirang: neid käsitletakse sisuliselt stringidena. See tähendab, et CSS ei tea iseenesest, mis tüüpi väärtust kohandatud omadus hoiab (nt number, värv, pikkus). Kuigi brauser proovib tüüpi tuletada, võib see põhjustada ootamatut käitumist, eriti animatsioonide ja üleminekute puhul. Näiteks värvi hoidva kohandatud omaduse animeerimise katse ei pruugi ootuspäraselt toimida või ei pruugi erinevates brauserites järjepidevalt töötada.

Tutvustame @property reeglit

@property reegel tegeleb selle piiranguga, võimaldades teil selgesõnaliselt defineerida kohandatud omaduse tüüpi, süntaksit, algväärtust ja pärimise käitumist. See pakub palju robustsemat ja ennustatavamat viisi kohandatud omadustega töötamiseks, eriti nende animeerimisel või üleminekute loomisel.

@property reegli süntaks

@property reegli põhisüntaks on järgmine:

@property --property-name {
  syntax: ;
  inherits: ;
  initial-value: ;
}

Vaatame iga reegli osa lähemalt:

• --property-name: See on kohandatud omaduse nimi, mida te defineerite. See peab algama kahe sidekriipsuga (--).
• syntax: See defineerib kohandatud omaduse väärtuse oodatava tüübi. See on string, mis kirjeldab kohandatud omaduse kehtivaid väärtusi. Levinumad süntaksi väärtused on:
• *: Sobib iga väärtusega. See on vaikeväärtus, kui süntaksit pole määratud. Kasutage seda ettevaatlikult, kuna see möödub tüübikontrollist.
• <color>: Sobib iga kehtiva CSS-i värviväärtusega (nt #ff0000, rgb(255, 0, 0), red).
• <length>: Sobib iga kehtiva CSS-i pikkusväärtusega (nt 10px, 2em, 50%).
• <number>: Sobib iga arvväärtusega (nt 1, 3.14, -2.5).
• <integer>: Sobib iga täisarvu väärtusega (nt 1, -5, 0).
• <angle>: Sobib iga nurga väärtusega (nt 45deg, 0.5rad, 100grad).
• <time>: Sobib iga ajaväärtusega (nt 1s, 500ms).
• <percentage>: Sobib iga protsendiväärtusega (nt 50%, 100%).
• <image>: Sobib iga pildiväärtusega (nt url(image.jpg), linear-gradient(...)).
• <string>: Sobib iga stringiväärtusega (ümbritsetud kahe- või ühekordsete jutumärkidega).
• Samuti saate süntaksi kirjeldajaid kombineerida, kasutades |, et lubada mitut tüüpi (nt <length> | <percentage>).
• Keerulisema süntaksi defineerimiseks saate kasutada regulaaravaldisi. See kasutab CSS-i laiu märksõnu inherit, initial, unset ja revert kehtivate väärtustena, kui süntaks neid määratleb, isegi kui need pole tavaliselt süntaksi tüübi jaoks lubatud. Näide: '\d+px' lubab väärtusi nagu '10px', '200px', kuid mitte '10em'. Pange tähele kaldkriipsu topelt-escapimist.
• inherits: See on kahendmuutuja väärtus (true või false), mis näitab, kas kohandatud omadus peaks pärima oma väärtuse oma vanem-elemendilt. Vaikeväärtus on false.
• initial-value: See defineerib kohandatud omaduse algväärtuse. See on väärtus, mis omadusel on, kui seda pole elemendil selgesõnaliselt määratud. Oluline on anda kehtiv algväärtus, mis vastab defineeritud syntax-ile. Kui algväärtust ei anta ja omadus ei ole päritud, on selle algväärtuseks kehtetu omaduse väärtus.

@property reegli praktilised näited

Vaatame mõningaid praktilisi näiteid, et illustreerida, kuidas @property reeglit saab kasutada reaalsetes olukordades.

Näide 1: Kohandatud värvi animeerimine

Värvide animeerimine tavaliste CSS-üleminekutega võib mõnikord olla keeruline. @property reegel muudab selle palju lihtsamaks.

@property --brand-color {
  syntax: <color>;
  inherits: false;
  initial-value: #007bff;
}

:root {
  --brand-color: #007bff;
}

.element {
  background-color: var(--brand-color);
  transition: --brand-color 0.5s ease-in-out;
}

.element:hover {
  --brand-color: #28a745; /* Muuda hõljumisel roheliseks värviks */
}

Selles näites defineerime kohandatud omaduse nimega --brand-color ja määrame, et selle süntaks on <color>. Samuti seame algväärtuseks #007bff (sinine toon). Nüüd, kui .element peale hiirega minna, läheb taustavärv sujuvalt üle sinisest roheliseks.

Näide 2: Kohandatud pikkuse animeerimine

Pikkuste (nt laius, kõrgus) animeerimine on veel üks levinud kasutusjuht @property reegli jaoks.

@property --element-width {
  syntax: <length>;
  inherits: false;
  initial-value: 100px;
}

.element {
  width: var(--element-width);
  transition: --element-width 0.3s ease-out;
}

.element:hover {
  --element-width: 200px;
}

Siin defineerime kohandatud omaduse nimega --element-width ja määrame, et selle süntaks on <length>. Algväärtuseks on seatud 100px. Kui .element peale hiirega minna, muutub selle laius sujuvalt 100 pikslist 200 pikslini.

Näide 3: Kohandatud edenemisriba loomine

@property reeglit saab kasutada kohandatud edenemisribade loomiseks, mille animatsiooni üle on rohkem kontrolli.

@property --progress {
  syntax: <number>;
  inherits: false;
  initial-value: 0;
}

.progress-bar {
  width: 200px;
  height: 10px;
  background-color: #eee;
}

.progress-bar::before {
  content: '';
  display: block;
  width: calc(var(--progress) * 1%);
  height: 100%;
  background-color: #007bff;
  transition: --progress 0.3s ease-in-out;
}

.progress-bar[data-progress="50"]::before {
  --progress: 50;
}

.progress-bar[data-progress="100"]::before {
  --progress: 100;
}

Selles näites defineerime kohandatud omaduse nimega --progress, mis esindab edenemise protsenti. Seejärel kasutame calc() funktsiooni, et arvutada edenemisriba laius --progress väärtuse põhjal. Määrates .progress-bar elemendile data-progress atribuudi, saame kontrollida edenemise taset.

Näide 4: Teemade kujundamine kohandatud omadustega

@property reegel täiustab teemade kujundamist, pakkudes usaldusväärsemat ja ennustatavamat käitumist erinevate teemade vahel üleminekul. Kaaluge järgmist näidet lihtsa tumeda/heleda teema lüliti jaoks:

@property --bg-color {
    syntax: <color>;
    inherits: false;
    initial-value: #ffffff; /* Heleda teema vaikeväärtus */
}

@property --text-color {
    syntax: <color>;
    inherits: false;
    initial-value: #000000; /* Heleda teema vaikeväärtus */
}

:root {
    --bg-color: #ffffff;
    --text-color: #000000;
    transition: --bg-color 0.3s, --text-color 0.3s;
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

.dark-theme {
    --bg-color: #333333; /* Tume teema */
    --text-color: #ffffff;
}

Defineerides --bg-color ja --text-color @property reegliga, on üleminek teemade vahel sujuvam ja usaldusväärsem võrreldes tavaliste kohandatud omaduste kasutamisega ilma defineeritud tüüpideta.

Brauseri ühilduvus

2023. aasta lõpu seisuga on brauserite tugi @property reeglile üldiselt hea kaasaegsetes brauserites, sealhulgas Chrome, Firefox, Safari ja Edge. Siiski on alati hea mõte kontrollida uusimat brauseri ühilduvuse teavet veebisaitidelt nagu Can I Use (caniuse.com), et tagada, et teie sihtrühmal on selle funktsiooni jaoks piisav tugi.

Kui teil on vaja toetada vanemaid brausereid, mis ei toeta @property reeglit, saate kasutada funktsioonide tuvastamist JavaScriptiga ja pakkuda varulahendusi. Näiteks saate JavaScripti abil tuvastada, kas brauser toetab CSS.registerProperty (@property-ga seotud JavaScripti API-t) ja seejärel rakendada alternatiivseid stiile, kui seda ei toetata.

Parimad praktikad @property reegli kasutamiseks

Siin on mõned parimad praktikad, mida @property reegli kasutamisel silmas pidada:

• Defineerige süntaks hoolikalt: Valige oma kohandatud omaduse jaoks kõige sobivam süntaksi väärtus. See aitab vältida vigu ja tagada, et teie CSS käitub ootuspäraselt.
• Pakkuge algväärtusi: Andke oma kohandatud omadustele alati initial-value. See tagab, et omadusel on kehtiv väärtus isegi siis, kui seda pole elemendil selgesõnaliselt määratud.
• Kaaluge pärimist: Mõelge hoolikalt, kas teie kohandatud omadus peaks pärima oma väärtuse oma vanem-elemendilt. Enamasti on parem seada inherits väärtuseks false, kui teil pole konkreetset põhjust pärimist lubada.
• Kasutage kirjeldavaid omaduste nimesid: Valige oma kohandatud omadustele kirjeldavad nimed, mis näitavad selgelt nende eesmärki. See muudab teie CSS-i loetavamaks ja hooldatavamaks. Näiteks --color asemel kasutage --primary-button-color.
• Testige põhjalikult: Testige oma CSS-i erinevates brauserites ja seadmetes, et tagada selle ootuspärane toimimine. Pöörake erilist tähelepanu animatsioonidele ja üleminekutele, kuna need on valdkonnad, kus @property reeglil võib olla kõige suurem mõju.
• Dokumenteerige oma kood: Lisage oma CSS-ile kommentaare, et selgitada oma kohandatud omaduste eesmärki ja nende kasutamist. See muudab teistel arendajatel (ja teie tulevasel minal) teie koodi mõistmise lihtsamaks.

Juurdepääsetavuse kaalutlused

@property reegli kasutamisel on oluline arvestada juurdepääsetavusega. Veenduge, et teie animatsioonid ja üleminekud ei oleks kognitiivsete puuetega kasutajatele liiga häirivad ega desorienteerivad. Vältige vilkuvaid või stroboskoopilisi animatsioone, kuna need võivad mõnel inimesel krampe esile kutsuda.

Samuti veenduge, et teie värvivalikud pakuksid piisavat kontrasti nägemispuudega kasutajatele. Saate kasutada tööriistu nagu WebAIM Contrast Checker, et kontrollida, kas teie värvikombinatsioonid vastavad juurdepääsetavuse juhistele.

Globaalsed kaalutlused

Globaalsele publikule veebisaitide ja rakenduste arendamisel on oluline arvestada kultuuriliste erinevuste ja lokaliseerimisega. Siin on mõned asjad, mida @property reegli kasutamisel globaalses kontekstis silmas pidada:

• Teksti suund: Olge teadlik teksti suunast (vasakult paremale vs paremalt vasakule), kui kasutate kohandatud omadusi paigutuse või positsioneerimise kontrollimiseks. Kasutage loogilisi omadusi (nt margin-inline-start asemel margin-left), et tagada teie paigutuse korrektne kohandumine erinevate teksti suundadega.
• Numbri- ja kuupäevavormingud: Olge teadlik erinevates riikides kasutatavatest erinevatest numbri- ja kuupäevavormingutest. Vältige konkreetsete vormingute kõvakodeerimist oma CSS-is ja toetuge selle asemel brauseri vaikevormingule või kasutage JavaScripti numbrite ja kuupäevade vormindamiseks vastavalt kasutaja lokaadile.
• Värvisümboolika: Olge teadlik, et värvidel võib olla erinevates kultuurides erinev tähendus. Vältige värvide kasutamist, mida võidakse teatud kultuurides pidada solvavaks või sobimatuks.
• Keeletugi: Veenduge, et teie kohandatud omadused töötaksid korrektselt erinevate keeltega. Testige oma veebisaiti erinevate keeltega, et tuvastada võimalikud probleemid.

CSS-i kohandatud omaduste ja @property reegli tulevik

@property reegel on oluline samm edasi CSS-i arengus. Kuna brauserite tugi jätkuvalt paraneb, võime oodata selle võimsa funktsiooni jaoks veelgi uuenduslikumaid kasutusviise. Tulevikus võime näha @property reeglile lisatavaid uusi süntaksi väärtusi, et toetada keerukamaid andmetüüpe, nagu massiivid ja objektid. Samuti võime näha paremat integratsiooni JavaScriptiga, mis võimaldab arendajatel dünaamiliselt luua ja manipuleerida kohandatud omadusi käitusajal.

Kohandatud omaduste ja @property reegli kombinatsioon sillutab teed modulaarsemale, hooldatavamale ja võimsamale CSS-arhitektuurile. Neid funktsioone omaks võttes saavad arendajad luua keerukamaid ja kaasahaaravamaid veebikogemusi, mis on kättesaadavad kasutajatele üle kogu maailma.

Kokkuvõte

@property reegel annab veebiarendajatele võimaluse defineerida kohandatud omaduste tüüpe, avades uusi võimalusi animatsioonide, teemade kujundamise ja üldise CSS-arhitektuuri jaoks. Mõistes selle süntaksit, võimekust ja parimaid praktikaid, saate seda võimsat funktsiooni kasutada robustsemate, hooldatavamate ja visuaalselt atraktiivsemate veebirakenduste loomiseks. Kuna brauserite tugi jätkuvalt kasvab, saab @property reeglist kahtlemata oluline tööriist kaasaegse veebiarendaja tööriistakastis. Võtke see tehnoloogia omaks, katsetage selle võimalustega ja avage CSS-i kohandatud omaduste kogu potentsiaal.

Lisalugemist

• MDN Web Docs: @property
• CSS Custom Properties for Cascading Variables Module Level 1